<template>
    <el-avatar class="user-img" :shape="props.shape" :size="props.szie" :src="props.url" />
    <el-divider direction="vertical" border-style="dashed" />
    <div class="user-info">
        {{ props.userName }}
    </div>
    <el-divider direction="vertical" border-style="dashed" />
    <div class="user-quit" @click="handleQuit">
        <el-tooltip class="box-item" effect="dark" content="退出系统" placement="bottom">
            <slot name="quit">
                <el-icon color="red" size="24">
                    <CircleCloseFilled />
                </el-icon>
            </slot>
        </el-tooltip>
    </div>
</template>

<script lang="ts" setup>
import { withDefaults } from 'vue'

interface Props {
    //头像形状
    shape?: 'circle' | 'square',
    // 姓名
    userName?: string,
    // 头像大小
    szie?: number,
    // 头像地址
    url?: string,
    // 退出系统方法 
    quitApp?: () => void
}

const props = withDefaults(defineProps<Props>(), {
    shape: 'square',
    userName: 'vue开发者',
    szie: 40,
    url: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
})


const handleQuit = () => {
    if (props.quitApp) {
        props.quitApp()
    }

}
</script>

<style lang="scss" scoped>
.user-img {
    cursor: pointer;
}

.user-info {
    cursor: pointer;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-quit {
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 100%;
    :deep(.el-icon){
        height: 100%;
    }
}
</style>